import { useState } from 'react';

export const Parent = () => {
  // 父组件定义一个状态变量
  const [parentCount, setParentCount] = useState(0);

  // 事件处理函数
  const handleCount = () => {
    // 父组件中修改状态变量
    setParentCount(parentCount + 1);
  };

  return (
    <div>
      <h2>{parentCount}</h2>
      <button onClick={handleCount}>parentCount增1</button>
      <hr />
      {/* 将自增后的 parentCount 传递给子组件 */}
      <Child parentCount={parentCount}></Child>
    </div>
  );
};

// 子组件
const Child = (props) => {
  // 子组件使用父组件传入的 parentCount 作为自己的状态数据
  console.log('before', props.parentCount);
  const [childCount, setChildCount] = useState(props.parentCount);
  console.log('after', props.parentCount);

  return (
    <div>
      <h2>子组件</h2>
      <h3>子组件自己的状态数据childCount：{childCount}</h3>
      {/* 父组件传递的parentCount每次都发生变化。但是childCount只显示第一次初始化的值 */}
      <h3>父组件传入的parentCount：{props.parentCount}</h3>
    </div>
  );
};
